<template>
    <component :is="views[activeIndex]"></component>
    <TabBar v-model="activeIndex">
        <TabItem icon="home">首页</TabItem>
        <TabItem icon="search">搜索</TabItem>
        <TabItem icon="people">联系人</TabItem>
        <TabItem icon="setting">设置</TabItem>
    </TabBar>
</template>
<script setup>
import { ref } from "vue";
import TabBar from "./components/TabBar.vue";
import TabItem from "./components/TabItem.vue";

import home from './views/home.vue'
import search from './views/search.vue'
import contact from './views/contact.vue'
import setting from './views/setting.vue'

const views = [home, search, contact, setting]

const activeIndex = ref(0);
</script>
<style></style>
